<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .yellow{
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@17.0.2/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"
    ></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">

      function handle(e) {
        e.preventDefault()
        if (e.target.nodeName !== "A") {
          console.log(e.target.innerText)
        }
      }

      const list = [
        { id: 1, name: "jack", content: "rose, you jump i jump" },
        { id: 2, name: "rose", content: "jack, you see you, one day day" },
        { id: 3, name: "tom", content: "jack...." },
      ]
      const div = (
        <div>
          {list.length ? (
            <ul>
              {list.map((item) => (
                <li key={item.id} style={{ backgroundColor: "pink" }}>
                  <a href="" onClick={handle} style={{ color: "black" }}>
                    <h3 className="yellow">{item.name}</h3>
                    <p className="yellow">{item.content}</p>
                  </a>
                </li>
              ))}
            </ul>
          ) : (
            <h1>"暂无数据！</h1>
          )}
        </div>
      )
      ReactDOM.render(div, document.getElementById("root"))
    </script>
  </body>
</html>
